<template>
  <div class="map-page-container">
    <!-- 地图 -->
    <el-amap :center="center" :zoom="zoom" :rotation="rotation">
      <!-- 卫星图层 -->
      <el-amap-layer-satellite :visible="satelliteVisible" />

      <!-- 多边形区域 -->
      <el-amap-polygon
          v-for="(region, index) in regions"
          :key="'polygon-' + index"
          :path="region.path"
          :fill-color="region.color"
          :fill-opacity="0.5"
          :stroke-color="'#FF0000'"
          :stroke-weight="2"
          :editable="isEditable"
      />

      <!-- 文本标签 -->
      <el-amap-text
          v-for="(region, index) in regions"
          :key="'text-' + index"
          :position="getPolygonCenter(region.path)"
          :text="region.name"
          :offset="[-25, 0]"
          :text-style="{
          color: 'var(--color-text)',
          background: 'var(--color-background)',
          border: '1px solid #ccc',
          borderRadius: '5px',
          padding: '2px 5px',
          fontSize: '12px',
          boxShadow: '0 2px 5px rgba(0, 0, 0, 0.2)',
        }"
          :visible="true"
          :draggable="false"
      />
    </el-amap>

    <!-- 工具栏 -->
    <div class="toolbar">
      <button @click="toggleSatellite">
        {{ satelliteVisible ? "隐藏卫星图" : "显示卫星图" }}
      </button>
      <button @click="toggleEditable">
        {{ isEditable ? "锁定区域" : "解锁区域" }}
      </button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import {
  ElAmap,
  ElAmapLayerSatellite,
  ElAmapPolygon,
  ElAmapText,
} from "@vuemap/vue-amap";

// 地图初始配置
const center = ref<[number, number]>([112.447101, 39.37386]);
const zoom = ref(16.3);
const rotation = ref(-3); // 初始地图旋转角度，单位为度
const satelliteVisible = ref(true);
const isEditable = ref(false);

// 区域数据
const regions = ref<
    Array<{
      path: [number, number][]; // 确保path类型是 [number, number][]
      color: string;
      name: string;
    }>
>([
  {
    path: [
      [112.444526, 39.375843],
      [112.444397, 39.374358],
      [112.445427, 39.374317],
      [112.445513, 39.375785],
    ],
    color: "#FFCCCC",
    name: "区域一",
  },
  {
    path: [
      [112.44871, 39.376116],
      [112.44851, 39.374256],
      [112.449609, 39.374197],
      [112.44966, 39.37614],
    ],
    color: "#CCFFCC",
    name: "区域二",
  },
  {
    path: [
      [112.442187, 39.376387],
      [112.442026, 39.373717],
      [112.44415, 39.373617],
      [112.444354, 39.376329],
    ],
    color: "#CCCCFF",
    name: "区域三",
  },
  {
    path: [
      [112.450202, 39.376132],
      [112.450062, 39.374316],
      [112.45209, 39.374291],
      [112.452186, 39.376074],
    ],
    color: "#FFFFCC",
    name: "区域四",
  },
]);

// 切换区域编辑状态
const toggleEditable = () => {
  isEditable.value = !isEditable.value;
};

// 切换卫星图层显示/隐藏
const toggleSatellite = () => {
  satelliteVisible.value = !satelliteVisible.value;
};

// 获取多边形中心
const getPolygonCenter = (path: [number, number][]) => {
  let area = 0; // 多边形面积
  let centerX = 0;
  let centerY = 0;

  for (let i = 0, len = path.length; i < len; i++) {
    const [x1, y1] = path[i];
    const [x2, y2] = path[(i + 1) % len];
    const cross = x1 * y2 - x2 * y1;

    area += cross;
    centerX += (x1 + x2) * cross;
    centerY += (y1 + y2) * cross;
  }

  area /= 2;
  centerX /= 6 * area;
  centerY /= 6 * area;

  return [centerX, centerY] as [number, number];
};
</script>

<style scoped>
.map-page-container {
  width: 100%;
  height: 80vh;
  position: relative;
}

.toolbar {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1000; /* 确保按钮位于地图上方 */
  display: flex;
  gap: 10px;
}

button {
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>
